import React, { useState, useMemo, useEffect } from 'react';
import { obj_str, show_mt, is_empty, useHigh, GridTable, filter_row, useCmd, WaitUmd, MainView, BtTxt,
    uDb, no_del, filter_list, uJob, cline, PanelFind, loc } from 'sui';
import { show_val, load_stuff, load_kind, load_supply, load_col } from '../task/cmd';
import { load_sale } from './cmd';
import { useAccess } from 'cache';
import { InfoView } from './info';

const BackView = () => {
    const [col, setCol] = useState();
    const [main, setMain] = useState();
    const [map_supply, mapSupply] = useState();
    const [map_stuff, mapStuff] = useState();
    const [map_kind, mapKind] = useState();
    const [high] = useHigh(140, 100);
    const umd = useCmd();
    const [no_acc] = useAccess();

    useEffect(() => {
        load_supply(null, mapSupply);
        load_col(setCol);
        load_kind(null, mapKind);
        load_stuff(null, mapStuff);

        load_sale(null, setMain);
    }, []);

    const getRow = useMemo(() => {
        const lst = filter_list(null, col);
        return filter_row(main, lst, umd.filter);
    }, [main, umd.filter, col]);

    if (umd.isFin("info")) {
        return <InfoView hreturn={umd.hreturn} cur={umd.cur}/>;
    }

    const pact = {
        "del": v => {
            if (no_del()) {
                return;
            }

            umd.startWait();

            uDb(null, "file/rm/back",
                {
                    line: cline(),
                    sn: obj_str(v, "sn"),
                },
                r => load_sale(umd.endWait, setMain),
                e => umd.setErr());
        },
        "fin": v => {
            if (no_del(loc("l_579"))) {
                return;
            }

            umd.startWait();

            uJob(null, "sale/back",
                {
                    line: cline(),
                    k: obj_str(v, "sn"),
                },
                r => load_sale(umd.endWait, setMain),
                e => umd.setErr());
        },
    };

    const getCol = () => {
        if (is_empty(col)) {
            return null;
        }

        const tmp = [
            {name: loc("l_193"), key: 'index', width: 70, frozen: true},
            {name: loc("l_238"), key: 'e_opt', width: 200, formatter: (props) => {
                const d = props.row;
                return (
                    <div className="inline-flex">
                        <BtTxt hcmd={() => umd.pact(pact, d, "del")} disabled={no_acc("wb")}>{loc("l_237")}</BtTxt>
                        <BtTxt hcmd={() => umd.pact(pact, d, "info")} disabled={no_acc("wb")}>{loc("l_887")}</BtTxt>
                        <BtTxt hcmd={() => umd.pact(pact, d, "fin")} disabled={no_acc("wb")}>{loc("l_579")}</BtTxt>
                    </div>
                );
            }},
            {name: loc("l_576"), key: 'num', width: 90},
        ];

        col.forEach(d => {
            if (d.sn === "kind") {
                tmp.push({name: d.name, key: d.sn, width: 70, formatter: (props) => show_val(props, "kind", map_kind)});
            } else if (d.sn === "supply") {
                tmp.push({name: d.name, key: d.sn, width: 200, formatter: (props) => show_val(props, "supply", map_supply)});
            } else if (d.sn === "stuff") {
                tmp.push({name: d.name, key: d.sn, width: 70, formatter: (props) => show_val(props, "stuff", map_stuff)});
            } else {
                show_mt(tmp, d, 160);
            }
        });

        return tmp;
    };

    const Left = () => (
        <div className="inline-flex items-center">
            {loc("l_575")}
        </div>
    );

    return (
        <MainView>
            <PanelFind left={<Left/>} hcmd={v => umd.setFilter(v)}/>
            <GridTable col={getCol()} row={getRow} high={high}/>
            <WaitUmd umd={umd}/>
        </MainView>
    );
};

export {BackView};
